<template>
	<view class="top-up-box">
		<view class="header">
			<view class="title">请选择充值金额</view>
			<view v-if="explain" class="explain" @tap.stop.prevent="getExplain">充值说明</view>
		</view>
		<scroll-view scroll-y="true" class="top-up-list-scroll" v-if="explain"
			:style="{ '--scroll-length':  list.length > 6 ? 3 : Math.ceil(list.length / 2) }">
			<template v-for="(item, index) in list">
				<view class="top-up-item" v-if="item.isRetain != 0  && item" :key="item.id" :class="{ 'top-up-item-active': current == index }"
					@tap.stop.prevent="select(index)">
					<view class="top-up-item-vip" v-if="item.rechargeType == 1"></view>
					<view class="pirce">¥ {{ item.sellingPrice }}</view>
					<view class="original_usable" v-if="item.rechargeType == 0">{{ item.goldNum }}金币
						<!-- <text style="color: #ff6f00; margin-left: 10rpx">送{{ item.giftNum }}金币</text> -->
						<text v-if="item.giftState != 0" style="color: #ff6f00; margin-left: 10rpx;">{{ item.remark }}</text>
					</view>
					<view class="original_usable" v-if="item.rechargeType == 1 || item.rechargeType == 2">{{item.remark}}</view>
					<!-- --xx-- -->
					<view class="usable" v-if="item.rechargeType == 0">共{{ item.goldNum + item.giftNum }}币</view>
					<view class="usable" v-if="item.rechargeType == 2">解锁全集</view>
					<view class="usable usable-vip" v-if="item.rechargeType == 1">全场短剧免费看</view>
				</view>
			</template>
		</scroll-view>
		<view class="top-up-list" v-else>
			<template v-for="(item, index) in list">
				<!-- && item.rechargeType != 2 -->
				<view class="top-up-item" v-if="item.isRetain != 0 && item" :key="item.id" :class="{ 'top-up-item-active': current == index }"
					@tap.stop.prevent="select(index)">
					<view class="top-up-item-vip" v-if="item.rechargeType == 1"></view>
					<view class="pirce">¥ {{ item.sellingPrice }}</view>
					<view class="original_usable" v-if="item.rechargeType == 0">{{ item.goldNum }}金币
						<!-- <text style="color: #ff6f00; margin-left: 10rpx">送{{ item.giftNum }}金币</text> -->
						<text v-if="item.giftState != 0" style="color: #ff6f00; margin-left: 10rpx;">{{ item.remark }}</text>
					</view>
					<view class="original_usable" v-if="item.rechargeType == 1 || item.rechargeType == 2">{{item.remark}}</view>
					<view class="usable" v-if="item.rechargeType == 0">共{{ item.goldNum + item.giftNum }}币</view>
					<view class="usable" v-if="item.rechargeType == 2">解锁全集</view>
					<view class="usable usable-vip" v-if="item.rechargeType == 1">全场短剧免费看</view>
				</view>
			</template>
		</view>
		<view class="pay-btn" :class="explain ? 'bottom' : ''" :style="{ marginTop: btnTop }" @tap.stop.prevent="payInfo">
			<text v-if="list[current].rechargeType == 0">立即支付（多送{{ list[current].giftNum }}币）</text>
			<text v-else>立即支付</text>
		</view>
	</view>
</template>
<script>
	import mp from '@/mixins/mp.js';
	import { pay } from '@/common/api';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	export default {
		name: 'top-up',
		mixins: [mp],
		props: {
			explain: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			btnTop: {
				type: [String, Number],
				default: '40rpx'
			},
			episodeId: {
				type: [String, Number],
				default: ''
			},
			skitId: {
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				current: 0
			};
		},
		methods: {
			select(index) {
				if (index != this.current) {
					this.current = index;
				}
			},
			setCurrent(index) {
				this.current = index;
			},
			payInfo() {
				throttle(this.payMent(), 1000, true)
			},
			payMent() {
				uni.showLoading({ title: '正在支付', mask: true });
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						// Android
						this.androidPay()
						break;
					case 'ios':
						// iOS
						this.iosPay()
						break;
					default:
						// this.androidPay()
						this.iosPay()
						break;
				}
			},
			iosPay() {
				let orderType = 0
				let skitId = this.list[this.current].rechargeType == 0 ? '' : this.skitId
				// let orderType = this.explain ? 2 : 0
				let currencyGoodsId = this.list[this.current].id
				let episodeId = ''
				let rechargeType = this.list[this.current].rechargeType
				let pullOrderEpisode = this.episodeId
				let params = { orderType, currencyGoodsId, episodeId, skitId, rechargeType, pullOrderEpisode }
				pay(params).then((result) => {
					let pay_params = {
						platform: 'ios',
						rechargeType: this.list[this.current].rechargeType,
						orderId: result.orderId,
						// #ifdef MP-WEIXIN
						timeStamp: result.wechatOrder.timeStamp,
						nonceStr: result.wechatOrder.nonceStr,
						package: result.wechatOrder.packageStr,
						signType: result.wechatOrder.signType,
						paySign: result.wechatOrder.paySign,
						payform: 'wx',
						// #endif

						// #ifdef MP-TOUTIAO
						payform: 'tt',
						data: result.byteDanceOrderVO.data,
						byteAuthorization: result.byteDanceOrderVO.byteAuthorization,
						// #endif
					}
					uni.hideLoading();
					this.$emit('pay', pay_params);
				}).catch((err) => {
					uni.hideLoading();
				});
			},
			androidPay() {
				let orderType = 0
				// let orderType = this.explain ? 2 : 0
				let skitId = this.list[this.current].rechargeType == 0 ? '' : this.skitId
				let currencyGoodsId = this.list[this.current].id
				let episodeId = ''
				let rechargeType = this.list[this.current].rechargeType
				let pullOrderEpisode = this.episodeId
				let params = { orderType, currencyGoodsId, episodeId, skitId, rechargeType, pullOrderEpisode }
				pay(params).then((result) => {
					let pay_params = {
						platform: 'android',
						rechargeType: this.list[this.current].rechargeType,
						orderId: result.orderId,
						// #ifdef MP-WEIXIN
						signData: result.virtualOrder.signDataStr,
						paySig: result.virtualOrder.paySig,
						signature: result.virtualOrder.signature,
						mode: result.virtualOrder.mode,
						payform: 'wx',
						// #endif

						// #ifdef MP-TOUTIAO
						payform: 'tt',
						data: result.byteDanceOrderVO.data,
						byteAuthorization: result.byteDanceOrderVO.byteAuthorization,
						// #endif
					}
					uni.hideLoading();
					this.$emit('pay', pay_params);
				}).catch((err) => {
					uni.hideLoading();
				});
			},
			getExplain() {
				this.$emit('getExplain');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top-up-box {
		width: 100%;

		.header {
			margin-bottom: 24rpx;
			display: flex;

			.title {
				font-weight: 400;
				font-size: 26rpx;
				color: #ffffff;
				line-height: 37rpx;
			}

			.explain {
				flex: 1;
				text-align: end;
				font-weight: 400;
				font-size: 26rpx;
				color: #ffffff;
				line-height: 37rpx;
			}
		}

		.top-up-list {
			display: grid;
			grid-template-columns: calc(50% - 11rpx) calc(50% - 11rpx);
			column-gap: 22rpx;
			row-gap: 20rpx;
			width: 100%;
		}

		.top-up-list-scroll {
			height: calc((203rpx + 20rpx) * var(--scroll-length) + (var(--scroll-length) * 10rpx));

			.top-up-item {
				display: inline-block;
				width: calc(50% - 12rpx);
				margin-bottom: 20rpx;

				&:nth-child(2n-1) {
					margin-right: 22rpx;
				}

				&:last-child,
				&:nth-last-child(2) {
					margin-bottom: 0;
				}
			}
		}

		.top-up-item {
			width: 340rpx;
			height: 203rpx;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 20rpx;
			border: 2rpx solid #6b6b6d;
			box-sizing: border-box;
			padding: 40rpx 20rpx 40rpx 24rpx;
			position: relative;

			&.top-up-item-active {
				// background-color: rgba(255, 111, 0, 0.15);
				background: linear-gradient(135deg, #FFF1E9 0%, #FCDDC3 100%);
				border-radius: 20rpx;
				border: 2rpx solid transparent;

				.pirce {
					color: #844E22;
				}

				.original_usable {
					color: #844E22;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.usable {
					background: #ff6f00;
					color: #ffffff;

					&.usable-vip {
						background: linear-gradient(135deg, #FF7500 0%, #FF9300 38%, #FFA800 56%, #FF8900 69%, #FF6F00 100%);
					}
				}
			}

			.top-up-item-vip {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 336rpx;
				height: 199rpx;
				border-radius: 20rpx;
				background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/vip-card-1.png");
				background-repeat: no-repeat;
				background-size: cover;
				z-index: 2;
			}

			.pirce {
				font-weight: 600;
				font-size: 44rpx;
				color: #ffffff;
				line-height: 62rpx;
				margin-bottom: 24rpx;
			}

			.original_usable {
				font-weight: 400;
				font-size: 26rpx;
				color: #ffffff;
				line-height: 37rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.usable {
				position: absolute;
				right: 0;
				top: 0;
				min-width: 144rpx;
				height: 48rpx;
				box-sizing: border-box;
				padding: 0 17rpx;
				background: rgba(255, 111, 0, 0.2);
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #ff6f00;
				line-height: 48rpx;
				text-align: center;
			}
		}

		.pay-btn {
			width: 702rpx;
			height: 110rpx;
			background: linear-gradient(135deg, #FFF1E9 0%, #FCDDC3 100%);
			border-radius: 20rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #844E22;
			line-height: 110rpx;
			text-align: center;

			&.bottom {
				position: absolute;
				left: 50%;
				bottom: 86rpx;
				transform: translateX(-50%);
			}
		}
	}
</style>